

<template>
  <div class="params">
    <el-form size="small" label-width="90px">
      <el-collapse v-model="activeCollapse" accordion>
        <el-collapse-item title="基本配置" name="1">
          <el-tabs v-model="activeName">
            <el-tab-pane
              :name="item.name"
              :label="item.label"
              v-for="(item, index) in commonTabs"
              :key="index"
            >
              <template v-if="item.type === 'style'">
                <style-component :styleText.sync="styleText"></style-component>
              </template>
              <template v-else>
                <freeItem :options="item.options"></freeItem>
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-collapse-item>
        <el-collapse-item title="定制配置" name="2">
          <freeItem :options="formList" v-if="formList.length">
            <template #default="{ slotName, params }">
              <slot :name="slotName" :params="params"></slot>
            </template>
          </freeItem>

          <template v-else>
            <slot></slot>
          </template>
        </el-collapse-item>
        <!-- <el-collapse-item title="其他配置" name="3"></el-collapse-item> -->
      </el-collapse>
    </el-form>
  </div>
</template>
<script>
import freeItem from "./freeItem.vue";
import { basicOptions } from "./options/basicOptions";
import { extendOptions } from "./options/extendOptions";
import { rotateOptions } from "./options/rotateOptions";
import StyleComponent from "./styleComponent.vue";

export default {
  name: "FormItem",
  components: { freeItem, StyleComponent },
  inject: ["father"],
  props: {
    formList: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
      activeName: "1",
      activeCollapse: "1",
      commonTabs: [
        {
          options: basicOptions,
          label: "公共配置",
          name: "1",
        },
        {
          options: extendOptions,
          label: "扩展配置",
          name: "2",
        },
        {
          options: rotateOptions,
          label: "旋转配置",
          name: "3",
        },
        {
          label: "自定义样式配置",
          name: "4",
          type: "style",
        },
      ],
    };
  },
  computed: {
    styleText: {
      get() {
        return this.father.component.__commonOptions__.styleText;
      },
      set(val) {
        this.father.component.__commonOptions__.styleText = val;
      },
    },
  },
};
</script>

<style scoped>
</style>